<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		background-color: rgb(245, 246, 250);
	}
	a{
		text-decoration: none;
		color: black;
		font-weight:bold;
	}
	a:hover{
		color: rgb(105, 109, 115);
	}
	#navRight{
		position: absolute;
		top:7vh;
		position: fixed;
		display: none;
		right: 30vw;
		z-index: 2;
	}
	nav{
		background-color:white;
		display: inline-block;
		position: relative;
		width: 100vw;
		height: 10vh;
		position: fixed;
		z-index: 1;
		font-size: 1vw;
	}
	nav a{
	     position: relative;
	     margin-top: 1%;
	     margin-right: 4%;
	     right: 15%;
	     font-size: 3vh;
	}
	nav .headA{
		float: right;
	}
	#log{
		width:12vw;
		height: 100%;
		display: inline-block;
		position: relative;
		left: 10%;
	}
	.user{
		background-color: white;
		height: 15vh;
	}
	.headimg{
		height: 40px;
		position: relative;
        left: 20%;
        top: 40%;
	}
	.username{
		width: 50%;
        position: relative;
        left: 25%;
        top: 30%;
	}
	.serchbox{
		background-color: white;
		position: relative;
		height: 15vh;
	    margin-top: 5%;
	}
	.serchtext{
		position: relative;
		margin: auto;
        width: 50%;
	}
	.serchbtn{
		position: relative;
		background-color: rgb(251, 114, 153);
		top: 4vh;
		left: 10%;
		color: white;
		font-size: 2vh;
	}
	.h1{
		background-color: white;
		position: relative;
	    margin-top: 2vh;
	}
	.h2{
		background-color: rgb(32, 187, 161);
		position: relative;
		height: 15vh;
	    margin-top: 2vh;
	    border: 1px solid;
	}
	.h2 a{
       position: relative;
       float: left;
       margin-top: 10%;
       left: 25%;
       margin-right: 5%;
	}
	.more {
		position: relative;
		top: 20%;
        float: right;
	}
	.h3{
		background-color: white;
		position: relative;
		height: 15vh;
	    margin-top: 2vh;
	}
	.t1{
		background-color: white;
		position: relative;
	    margin-top: 2.5vh;
	}
	#box{
		position: relative;
		top: 4vh;
		width: 80%;
		margin: auto;
	}
	#boxright{
		position: relative;
		top: 10vh;
		left: 50vw;
		width: 35%;
	}
	#navRight a li{
		list-style: none;
		text-align: center;
        width: 8vw;
        line-height: 200%;
        height: 5vh;
		background-color: rgb(245, 246, 250);
	}
	#left{
		/*margin-top: 2vh;*/
		width: 60%;
		bottom: 59vh;
        position: relative;
        left: 1%;
	}
	.pageBar{
		height: 4vh;
		width: 40vw;
		position: absolute;
		bottom: 45vh;
		left: 15vw;
	}
	#Inspost img{
		width :100px;
	}
	.pageBar a{
		border:0.1vh solid rgb(197, 197, 213);
	}
	#Inspost{
		position: fixed;
		right:30vw;
		bottom:50px;
	}
</style>
<body>
	<ul id="navRight">
		<a href="" id='a1'><li>功能一</li></a>
		<a href="" id='a2'><li>功能一</li></a>
		<a href="" id='a3'><li>功能一</li></a>
		<a href="" id='a4'><li>功能一</li></a>
		<a href="" id='a5'><li>更多</li></a>
	</ul>
	<nav>
		<img src="img/logo.png" alt="" id="log">
		<a href="" class="headA">首页</a>
		<a href="" class="headA" id="blog">博客</a>
		<a href="" class="headA" id="read">学习</a>
	</nav>
	<div id="box">
		<div id="boxright">
		    <div class="user">
		    	<a href="" class="headimg">headimg</a>
		    	<a href="" class="username">username</a>
		    </div>
		    <div class="serchbox">
		    	<button class="btn serchbtn">搜索:</button>
		    	<input type="text" class="form-control serchtext" placeholder="请输入查询关键字">
		    </div>
		    <div class="h1">
		    	热门文章
		    </div>
		     <div class="h3 text-justify">
		    	名人名言
		    </div>
	    </div>
	    <div id="left">
	    </div>
	    <div class="pageBar">
	    	
	    </div>
	</div>
	<div id="Inspost">
		<img src="img/989999.png">
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
window.onload=function(){
	searchUser();
	searchSaying();
	searchNote();
	searchPostNum(3); 
	searchAllPlate(1,4);
	searchI(1,10);
}

	$("nav a:eq(2)").mouseenter(function() {
		$("#navRight").slideDown("400").mousemove(function() {
			$("#navRight").attr({
				dsiplay: 'block',
			});
		});
	});
	$("#navRight").mouseleave(function() {
		$("#navRight").slideUp("400");
	});
	$("a").mouseenter(function() {
		$(this).css({
			color: 'pink',
		});
	}).mouseleave(function() {
		$(this).css('color', 'rgb(93, 79, 87)');
	});
	$("#navRight a li").mouseenter(function() {
			$(this).css('background', 'rgb(244, 244, 244)');
		}).mouseleave(function() {
			$(this).css('background', 'rgb(245, 246, 250)');
		});

	
	
	var params = location.search.substring(1);	
	var currentPage;
		function searchI(pageNum,pageSize){
			$.ajax({
				type:"POST",
				url:"Index.do",
				data:{
					userId:params.split("=")[1],
					pageNum:pageNum,
					pageSize:pageSize
				},
				success:function(data){
					$("#left").empty();
					$.ajax({
						type:"POST",
						url:"Note.do",
						success:function(data1){
							var $span=$("<span></span>").text("  "+data1.noteText);
							var $div1=$("<div>通知栏</div>").append($span);
							$("#left").append($div1);
							var Post = data.data;
							currentPage = data.pageNum;
							for(var i = 0; i<Post.length;i++){
								var str1=Post[i].postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").substring(0,100)+"...";
								var $p=$("<p>"+str1+"</p>");
								var $div=$("<div class='t1' onclick=intoPost("+Post[i].postId+","+params.split("=")[1]+")></div>").html(Post[i].postTitle+"<hr/>").append($p);
								$("#left").append($div);
							}
							makePageBar(data);

						}
					})
				}
			})
		}
		function intoPost(postId,userId){
			window.location.href ="post_reply.html?id="+postId+"&uId="+userId;
		}
		$("#Inspost").find("img").click(function(){
			window.location.href = "post.html?Id="+params.split("=")[1];
		})
		function makePageBar(data){
			$(".pageBar").empty();
			var totalPages = data.totalPages;
			var hasPrev = data.hasPrev;
			var hasNext = data.hasNext;
			var pageNum = data.pageNum;
			if(hasPrev){
				var $firstBtn = $("<a onclick='searchI(1,10)' href='javascript:void(0);'>首页</a>");
				var $prevBtn = $("<a onclick='searchI("+(pageNum-1)+",10)' href='javascript:void(0);'>上一页</a>");
				$(".pageBar").append($firstBtn).append($prevBtn);
			}
			
			for(var i =1; i<=totalPages;i++){
				var $pageBtn = $("<a onclick='searchI("+i+",10)' href='javascript:void(0);'></a>").text(i);
				$(".pageBar").append($pageBtn);
			}
			if(hasNext){
				var $lastBtn = $("<a onclick='searchI("+totalPages+",10)' href='javascript:void(0);'>尾页</a>");
				var $nextBtn = $("<a onclick='searchI("+(pageNum+1)+",10)' href='javascript:void(0);'>下一页</a>");
				$(".pageBar").append($nextBtn).append($lastBtn);
			}
		}
		function searchUser(){
			$.ajax({
				type:"POST",
				url:"User.do",
				data:{
					userId:params.split("=")[1]
				},
				success:function(data){
					$(".headimg").html("<img style = 'width:75px' src='"+data.userHeadImg+"'/>");
					$(".headimg").attr("href","userInformation.html?id="+data.userId+"&userId="+params.split("=")[1]);
					$(".username").attr("href","userInformation.html?id="+data.userId+"&userId="+params.split("=")[1]);
					$("#blog").attr("href","userInformation.html?id="+data.userId+"&userId="+params.split("=")[1])
					$(".username").text(data.userName);			
				}
			})
		}
		
		function searchSaying(){
			$.ajax({
				type:"POST",
				url:"saying.do",
				success:function(data){
					$(".h3").html(data.sayingText+"<p >"+data.sayingWriter+"</p>");
					$(".h3").find("p").text();
				}
			})
		}
		
		function searchSaying(){
			$.ajax({
				type:"POST",
				url:"saying.do",
				success:function(data){
					$(".h3").html(data.sayingText+"<p style='text-align:center;margin-top:10px'style='margin-top:20px'>"+data.sayingWriter+"</p>");
					$(".h3").find("p").text();
				}
			})
		}
		
		function searchNote(){
			
		}
		
		function searchPostNum(num){
			$.ajax({
				type:"POST",
				url:"PostNum.do",
				data:{
					num:num
				},
				success:function(data){
					var post=data.data;
					for(var i=0;i<post.length;i++){
						var str=data.data[i].postTitle.split("<h3>").join("").split("</h3>").join("").split("<h2>").join("").split("</h2>").join("");
						var $a=$("<a></a>").html("<p style='font-size: 16px'>"+str+"</p>");
						$(".h1").append($a);
						
					}
				}
			})
		}
		
		function searchAllPlate(pageNum,pageSize){
			$.ajax({
				type:"POST",
				url:"AllPlate.do",
				data:{
					pageNum:pageNum,
					pageSize:pageSize
				},
				success:function(data){
					var plate = data.data;
					currentPage = data.pageNum;
					$("#a1 li").text(plate[0].plateName);
					$("#a1 li").click(function(){
						$("#a1").attr("href","index_palte.html?id="+plate[0].plateId+"&userId="+params.split("=")[1]);
					})
					$("#a2 li").text(plate[1].plateName);
					$("#a2 li").click(function(){
						$("#a2").attr("href","index_palte.html?id="+plate[1].plateId+"&userId="+params.split("=")[1]);
					})
					$("#a3 li").text(plate[2].plateName);
					$("#a3 li").click(function(){
						$("#a3").attr("href","index_palte.html?id="+plate[2].plateId+"&userId="+params.split("=")[1]);
					})
					$("#a4 li").text(plate[3].plateName);
					$("#a4 li").click(function(){
						$("#a4").attr("href","index_palte.html?id="+plate[3].plateId+"&userId="+params.split("=")[1]);
					})
					
				}
			})
			
		}
		$("#a5 li").click(function(){
			$("#a5").attr("href","allPalte.html?id="+params.split("=")[1]);
		})
		$("#read").click(function(event){
			$(this).attr("href","allPalte.html?id="+params.split("=")[1]);
		})
		$("button").click(function(){
			console.log($('.serchtext'));
			if($('.serchtext').val()!=null){
				searchIndex(1,10);
			}
		})
		
		function searchIndex(pageNum,pageSize){
				$.ajax({
					type:"POST",
					url:"post.do",
					data:{
						postTitle:$('.serchtext').val(),
						pageNum:pageNum,
						pageSize:pageSize
					},
					success:function(data){
						$("#left").empty();
						$.ajax({
							type:"POST",
							url:"Note.do",
							success:function(data1){
								var $span=$("<span></span>").text("  "+data1.noteText);
								var $div1=$("<div>通知栏</div>").append($span);
								$("#left").append($div1);
								var Post = data.data;
								currentPage = data.pageNum;
								for(var i = 0; i<Post.length;i++){
									var str1=Post[i].postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").substring(0,100)+"...";
									var $p=$("<p>"+str1+"</p>");
									var $div=$("<div class='t1'></div>").html(Post[i].postTitle+"<hr/>").append($p);
									$("#left").append($div);
								}
								makePageBar(data);

							}
						})
					}
				})
			}
		
</script>
</html>